<template>
  <div class="box_father">
    <!-- 面包屑盒子 -->
    <div class="bread">
      <span>统计分析</span> >
      <span>盘点</span>
    </div>
    <div class="box_check">
      <h3>盘点记录</h3>
      <div class="create_check">
        
        <div>
          <el-button type="primary" @click="create_pan_btn">+新建盘点</el-button>
          <el-input
            v-model="pan_name"
            placeholder="请输入盘点名称"
            style="width: 200px;margin-left: 50px;"
          ></el-input>
          <!-- 选择日期 -->
          <el-date-picker
            v-model="pan_date"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            style="margin-left: 50px"
          >
          </el-date-picker>&nbsp;
          <el-button type="primary" @click="pan_search">查询</el-button>
          
        </div>
        <el-button  plain @click="pan_toExcel"  style="margin-right: 90px;">导出Excel</el-button>
      </div>
      <!-- 盘点表格 -->
      <div>
        <el-table
          ref="multipleTable"
          :data="checkData"
          tooltip-effect="dark"
          style="width: 100%"
          class="table_pan"
          @selection-change="handleSelectionChange"
          id="checkData_id"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="盘点名称" width="120">
            <template slot-scope="scope">{{ scope.row.checkName }}</template>
          </el-table-column>
          <el-table-column prop="name" label="创建人" width="120">
          </el-table-column>
          <el-table-column
            prop="checkStartTime"
            label="盘点开始时间"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="checkEndTime"
            label="盘点结束时间"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="checkState" label="状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.checkState == -1">未完成</span>
              <span v-if="scope.row.checkState == 0">未开始</span>
              <span v-if="scope.row.checkState == 1">已完成</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.checkState == 0">
                <router-link :to="`/pan_start?id=${scope.row.id}`">
                  <el-button type="primary" @click="pan_btn(scope.row.id)"
                    >开始盘点</el-button
                  ></router-link> &nbsp;
                <el-button type="danger" @click="deletePan_btn(scope.row.id)"
                  >删除</el-button
                >
              </span>
              <span v-if="scope.row.checkState == 1">
                <router-link :to="`/detail_pan?id=${scope.row.id}`">
                  <el-button type="primary"  >查看详情</el-button>
                </router-link>&nbsp;

                <el-button type="danger" @click="deletePan_btn(scope.row.id)"
                  >删除</el-button
                >
              </span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 和 批量删除 -->
        <div class="paging">
          <el-button type="danger" @click="deleteMany">批量删除</el-button>
          <el-pagination background layout="prev, pager, next" :total="total" @current-change = 'handleCurrentChange'>
          </el-pagination>
        </div>
      </div>
      <!-- 点击新建盘点的模态框 -->
      <el-dialog
        title="新增盘点"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose"
      >
        <span>盘点名称: </span>
        <el-input
          v-model="newAdd_pan"
          placeholder="请输入内容"
          class="newAdd_pan"
        ></el-input>
        <div>
          <h4>盘点范围：</h4>
          <!-- 教学设备分类 -->
          <div class="pan_tree">
            <div>
              <el-tree
                :data="data"
                :props="defaultProps"
                @node-click="handleNodeClick"
              ></el-tree>
            </div>
            <!-- 易耗品分类 -->
            <div>
              <!-- <el-tree
              :data="dataB"
              :props="defaultProps"
              @node-click="handleNodeClickB"
            ></el-tree> -->
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="over_createPan">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import statistics_serive from "../../serive/statistics";
import myExcel from '../../utils/toExcel'
export default {
  name: "check",
  data() {
    return {
      // 批量删除数组id
      delete_ids: [],
      // 把每个分类装进数组
      class_arr: [],
      class_arrB: [],
      // 搜索的盘点名称
      pan_name: "",
      // 登录用户名
      userName: "",
      // 控制新建盘点模态框
      dialogVisible: false,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      //盘点表
      checkData: [],
      checkData_B: [],

      // 多选框选中添加到该数组
      multipleSelection: [],
      // 盘点的时间
      pan_date: "",
      // 新增盘点名称输入框的值
      newAdd_pan: "",
      // 盘点范围树形分类
      data: [
        {
          label: "教学设备分类",
          children: [
            
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 分页
      total:50
    };
  },
  methods: {
    getList() {
      statistics_serive.record_pan("", "", "", "", 1, 10, 1).then((res) => {
        this.checkData = res.data.data;
        this.checkData_B = res.data.data;
        // console.log(res.data.count);
        console.log(res.data.data);
        this.total = res.data.count
        // console.log(res.data.data);
      });
    },
    // 把已勾选的盘点项加入到数据中
    handleSelectionChange(val) {
      this.multipleSelection = val;
      let ids = [];
      // console.log(this.multipleSelection);
      for (let i = 0; i < this.multipleSelection.length; i++) {
        // console.log(this.multipleSelection[i].id);
        ids.push(this.multipleSelection[i].id);
      }
      this.delete_ids = ids;
    },
    // 批量删除
    deleteMany() {
      // console.log(this.delete_ids);
      let a = this.delete_ids;
      statistics_serive.delete_pan(a).then((res) => {
        // 渲染盘点列表
        this.$message({
          message: "删除成功",
          type: "success",
        });
        statistics_serive.record_pan("", "", "", "", 1, 10, 1).then((res) => {
          this.checkData = res.data.data;
          // console.log(res.data.data);
        });
      });
    },
    // 控制新建盘点模态框显示隐藏
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 查询盘点记录
    pan_search() {
      console.log(this.pan_name, this.pan_date);
      let arr = [];
      for (let i = 0; i < this.checkData_B.length; i++) {
        if (this.checkData_B[i].checkName.includes(this.pan_name.trim())) {
          arr.push(this.checkData_B[i]);
        }
      }
      this.checkData = arr;
      arr = [];
    },
    // 新增盘点 按钮点击事件
    create_pan_btn() {
      this.dialogVisible = true;
      let name = localStorage.getItem("name");
      this.userName = name;
      // statistics_serive.create_pan();
      statistics_serive.area_pan().then((res) => {
        // console.log(res.data.data);
        // 遍历获取分类名称
        let classification = res.data.data;
        // console.log(classification);
        for (let i = 0; i < classification.length; i++) {
          this.class_arr.push({label:classification[i].className,id:classification[i].id});
        }
        // console.log(this.class_arr);
        this.data[0].children=this.class_arr
      });
    },
    // 盘点树形分类
    handleNodeClick(data) {
      console.log(data.id,data.label);
      this.fenlei_id = data.id
      this.fenlei_name = data.label
    },
    // 开始盘点按钮
    pan_btn(a) {
      // console.log(a);
    },
    // 确定新增盘点表
    over_createPan() {
      let rid= localStorage.getItem("rid")
      console.log("rid",rid);
      let id =this.fenlei_id
      let label = this.fenlei_name
      // console.log(id,label);
      if (this.newAdd_pan.trim().length < 1) {
        this.$message({
          message: "请输入盘点名称",
          type: "warning",
        });
      } else {
        this.dialogVisible = false;
        this.class_arr = [];
        statistics_serive.over_pan(this.newAdd_pan,id,'',rid).then((res) => {
          console.log('发起请求成功');
          console.log(res);
          // 新增后重新渲染页面
          statistics_serive.record_pan("", "", "", "", 1, 10, 1).then((res) => {
            this.checkData = res.data.data;
          });
        });
        this.newAdd_pan = ''
      }
    },

    // 删除盘点列表
    deletePan_btn(a) {
      // console.log("1", a);
      statistics_serive.delete_pan(a).then((res) => {
        // console.log(res);
        this.$message({
          message: "删除成功",
          type: "success",
        });
        // 渲染盘点裂变
        this.getList();
        // statistics_serive.record_pan("", "", "", "", 1, 5, 1).then((res) => {
        //   this.checkData = res.data.data;
        // console.log(res.data.data);
        // });
      });
    },
    // 分页器
    handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        statistics_serive.record_pan("", "", "", "", 1, 10, val).then((res) => {
        this.checkData = res.data.data;
        this.checkData_B = res.data.data;
        // console.log(res.data.data);
      });
    },
    pan_toExcel(){
      myExcel.getExcel("#checkData_id","盘点记录")
    }
  },
  mounted() {
    // 初始渲染盘点记录
    this.getList();
  },

};
</script>
<style scoped>
.box_father {
  /* background-color: #f4f4f6; */
  overflow-y: auto;
  height: 600px;
  width: 100%;
  margin-top: 50px;
  border-radius: 20px;
  box-shadow: 0px 20px 50px 0px rgba(191, 21, 108, 0.05);
}
.bread {
  margin-left: 20px;
  padding-top: 20px;
}
.box_check {
  background-color: #fff;
  margin: 20px;
  position: relative;
  padding: 20px;
}
.table_pan {
  /* height: 370px; */
}
.paging {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
/* 新增盘点模态框 */
.createPan {
  width: 600px;
  height: 500px;
  background-color: pink;
  position: absolute;
  left: 300px;
  top: 0;
}
.createPan input {
  width: 200px;
}
/* 新增盘点名称输入框 */
.newAdd_pan {
  width: 300px;
  margin-left: 20px;
}
.create_check {
  display: flex;
justify-content: space-between;
  margin-top: 20px;
}
.pan_tree {
  display: flex;
}
</style>

